<template>
  <div class="hotel-month-acc">
    <div class="top-section" style="display: flex; align-items: center; justify-content: space-between; padding: 12px 12px;">
      <div class="header-wrapper" style="margin-bottom: 0;">
        <h3 class="title">
          酒店月累计经营数据
          <span :class="['acc-title-span', { active: currentAcc === 'day' }]">当天</span>/
          <span :class="['acc-title-span', { active: currentAcc === 'month' }]">当月</span>/
          <span :class="['acc-title-span', { active: currentAcc === 'year' }]">当年累计</span>
        </h3>
      </div>
      <div class="form-wrapper" style="margin-bottom: 0; display: flex; align-items: center; gap: 8px;">
        <div class="form-content" style="display: flex; align-items: center; gap: 8px;">
          <div class="acc-selector">
            <img :src="daySvg" alt="day" class="button-icon" :title="'看当天'" :class="{ active: currentAcc === 'day' }" @click="handleAccChange('day')" />
            <img :src="monthSvg" alt="month" class="button-icon" :title="'看当月'" :class="{ active: currentAcc === 'month' }" @click="handleAccChange('month')" />
            <img :src="yearSvg" alt="year" class="button-icon" :title="'看当年'" :class="{ active: currentAcc === 'year' }" @click="handleAccChange('year')" />
          </div>
          <div class="form-item">
            <a-range-picker
              v-model:value="currentRange"
              :placeholder="['开始日期', '结束日期']"
              style="width: 260px"
              :open="rangePickerOpen"
              @openChange="onRangeOpenChange"
            >
              <template #suffixIcon>
                <calendar-outlined />
              </template>
              <template #renderExtraFooter>
                <div style="text-align: right; padding: 4px">
                  <a-button size="small" type="primary" @click="onRangeOk">确定</a-button>
                </div>
              </template>
            </a-range-picker>
          </div>
          <div class="form-item form-item-center" style="flex: 1; display: flex; align-items: center; justify-content: flex-end; min-width: 120px;">
            <a-switch
              v-model:checked="is_extendfield"
              style="margin-right: 0; width: 110px; min-width: 100px; vertical-align: middle;"
            >
              <template #checkedChildren>
                <span style="display: inline-block; width: 80px; text-align: center; font-size: 12px; color: #fff;">显示全部列</span>
              </template>
              <template #unCheckedChildren>
                <span style="display: inline-block; width: 80px; text-align: center; font-size: 12px; color: #666;">显示缩略列</span>
              </template>
            </a-switch>
          </div>
           
        </div>
      </div>
    </div>
    <div class="main-content">
      <a-card type="default">
        <div class="card-table-head">
          月累计经营数据
          <div class="card-table-head-remark">
            <a-button type="link" class="ant-btn-icon-only" @click="handleExport">
              <template #icon>
                <download-outlined />
              </template>
            </a-button>
          </div>
        </div>
        <div class="card-table-content">
          <div class="table-scroll-x">
            <table class="fixed-width-table">
              <thead>
                <tr>
                    <th rowspan="3" class="fixed-table-head head-group" data-field="hotelName">项目名称</th>                   
                    <th :colspan="is_extendfield ? 10 : 3" class="head-group">月累计实际</th>
                    <th :colspan="is_extendfield ? 10 : 3" class="head-group" >全月预算</th>                    
                    <th rowspan="3" data-field="monthCompleteRate" class="head-group" >月累计完成率</th>                   
                    <th :colspan="is_extendfield ? 10 : 3" class="head-group" >年累计实际</th>
                    <th :colspan="is_extendfield ? 10 : 3" class="head-group" >全年预算</th>
                    <th rowspan="3" data-field="yearCompleteRate" class="head-group" >年累计完成率</th>                
                  
                </tr>
                
                <tr class="head-layer2" >
                    <!-- 月累计实际 -->
                    <th v-if="is_extendfield" data-field="actualSrooms">已售房间夜</th>
                    <th v-if="is_extendfield" data-field="actualCrooms">可售房间夜</th>
                    <th data-field="actualRentRate">出租率</th>
                    <th data-field="actualPrice">平均房价</th>
                    <th v-if="is_extendfield" data-field="actualPerRevenue">每房收益</th>
                    <th v-if="is_extendfield" data-field="roomRevenue">客房收入</th>
                    <th v-if="is_extendfield" data-field="fbRevenue">餐厅收入</th>
                    <th v-if="is_extendfield" data-field="bhRevenue">宴会收入</th>
                    <th v-if="is_extendfield" data-field="otherRevenue">其他收入</th>
                    <th data-field="revenue">总收入</th>

                    <!-- 全月预算 -->
                    <th v-if="is_extendfield" data-field="monthSroomsBudget">已售房间夜</th>
                    <th v-if="is_extendfield" data-field="monthCroomsBudget">可售房间夜</th>
                    <th data-field="monthRentRate">出租率</th>
                    <th data-field="monthPrice">平均房价</th>
                    <th v-if="is_extendfield" data-field="monthPerRevenue">每房收益</th>
                    <th v-if="is_extendfield" data-field="monthRoomRevenue">客房收入</th>
                    <th v-if="is_extendfield" data-field="monthFbRevenue">餐厅收入</th>
                    <th v-if="is_extendfield" data-field="monthBhRevenue">宴会收入</th>
                    <th v-if="is_extendfield" data-field="monthOtherRevenue">其他收入</th>
                    <th data-field="monthBudget">总收入</th>
                    <!-- 年累计实际 -->
                    <th v-if="is_extendfield" data-field="ayearSrooms">已售房间夜</th>
                    <th v-if="is_extendfield" data-field="ayearCrooms">可售房间夜</th>
                    <th data-field="ayearRentRate">出租率</th>
                    <th data-field="ayearPrice">平均房价</th>
                    <th v-if="is_extendfield" data-field="ayearPerRevenue">每房收益</th>
                    <th v-if="is_extendfield" data-field="ayearRoomRevenue">客房收入</th>
                    <th v-if="is_extendfield" data-field="ayearFbRevenue">餐厅收入</th>
                    <th v-if="is_extendfield" data-field="ayearBhRevenue">宴会收入</th>
                    <th v-if="is_extendfield" data-field="ayearOtherRevenue">其他收入</th>
                    <th data-field="ayearRevenue">总收入</th>
                    <!-- 全年预算 -->
                    <th v-if="is_extendfield" data-field="yearSroomsBudget">已售房间夜</th>
                    <th v-if="is_extendfield" data-field="yearCroomsBudget">可售房间夜</th>
                    <th data-field="yearRentRate">出租率</th>
                    <th data-field="yearPrice">平均房价</th>
                    <th v-if="is_extendfield" data-field="yearPerRevenue">每房收益</th>
                    <th v-if="is_extendfield" data-field="yearRoomRevenue">客房收入</th>
                    <th v-if="is_extendfield" data-field="yearFbRevenue">餐厅收入</th>
                    <th v-if="is_extendfield" data-field="yearBhRevenue">宴会收入</th>
                    <th v-if="is_extendfield" data-field="yearOtherRevenue">其他收入</th>
                    <th data-field="yearBudget">总收入2</th>
                </tr>
                <tr>
                  <th v-if="is_extendfield">间夜</th>
                  <th v-if="is_extendfield">间夜</th>
                  <th ref="出租率">%</th>
                  <th ref="平均房价">元</th>
                  <th v-if="is_extendfield" ref="每房收益">元</th>
                  <th v-if="is_extendfield" ref="客房收入">元</th>
                  <th v-if="is_extendfield" ref="餐厅收入">元</th>                  
                  <th v-if="is_extendfield" ref="宴会收入">元</th>
                  <th v-if="is_extendfield" ref="其他收入">元</th>
                  <th ref="总收入">元</th>

                  <th v-if="is_extendfield">间夜</th>
                  <th v-if="is_extendfield">间夜</th>
                  <th ref="出租率">%</th>
                  <th ref="平均房价">元</th>
                  <th v-if="is_extendfield" ref="每房收益">元</th>
                  <th v-if="is_extendfield" ref="客房收入">元</th>
                  <th v-if="is_extendfield" ref="餐厅收入">元</th>                  
                  <th v-if="is_extendfield" ref="宴会收入">元</th>
                  <th v-if="is_extendfield" ref="其他收入">元</th>
                  <th ref="总收入">元</th>

                  <th v-if="is_extendfield">间夜</th>
                  <th v-if="is_extendfield">间夜</th>
                  <th ref="出租率">%</th>
                  <th ref="平均房价">元</th>
                  <th v-if="is_extendfield" ref="每房收益">元</th>
                  <th v-if="is_extendfield" ref="客房收入">元</th>
                  <th v-if="is_extendfield" ref="餐厅收入">元</th>                  
                  <th v-if="is_extendfield" ref="宴会收入">元</th>
                  <th v-if="is_extendfield" ref="其他收入">元</th>
                  <th ref="总收入">元</th>

                  <th v-if="is_extendfield" ref="已售房间夜">间夜</th>
                  <th v-if="is_extendfield" ref="可售房间夜">间夜</th>
                  <th ref="出租率">%</th>
                  <th ref="平均房价">元</th>
                  <th v-if="is_extendfield" ref="每房收益">元</th>
                  <th v-if="is_extendfield" ref="客房收入">元</th>
                  <th v-if="is_extendfield" ref="餐厅收入">元</th>
                  <th v-if="is_extendfield" ref="宴会收入">元</th>
                  <th v-if="is_extendfield" ref="其他收入">元</th>
                  <th ref="总收入">元</th>
                  
                </tr>
                              
              </thead>
              
              <tbody>
                <tr v-for="row in tableData" :key="row.hotelCode">
                  
                  <td class="fixed-table-head">{{ row.hotelName }}</td>
                  <!-- 月累计实际 -->
                  <td v-if="is_extendfield">{{ row.actualSrooms }}</td>
                  <td v-if="is_extendfield">{{ row.actualCrooms }}</td>
                  <td>{{ row.actualRentRate }}</td>
                  <td>{{ row.actualPrice }}</td>
                  <td v-if="is_extendfield">{{ row.actualPerRevenue }}</td>
                  <td v-if="is_extendfield">{{ row.roomRevenue }}</td>
                  <td v-if="is_extendfield">{{ row.fbRevenue }}</td>
                  <td v-if="is_extendfield">{{ row.bhRevenue }}</td>
                  <td v-if="is_extendfield">{{ row.otherRevenue }}</td>
                  <td>{{ row.revenue }}</td>
                  <!-- 全月预算 -->
                  <td v-if="is_extendfield">{{ row.monthSroomsBudget }}</td>
                  <td v-if="is_extendfield">{{ row.monthCroomsBudget }}</td>
                  <td>{{ row.monthRentRate }}</td>
                  <td>{{ row.monthPrice }}</td>
                  <td v-if="is_extendfield">{{ row.monthPerRevenue }}</td>
                  <td v-if="is_extendfield">{{ row.monthRoomRevenue }}</td>
                  <td v-if="is_extendfield">{{ row.monthFbRevenue }}</td>
                  <td v-if="is_extendfield">{{ row.monthBhRevenue }}</td>
                  <td v-if="is_extendfield">{{ row.monthOtherRevenue }}</td>
                  <td>{{ row.monthBudget }}</td>
                  <!-- 月累计完成率 -->
                  <td>{{ row.monthCompleteRate }}</td>
                  <!-- 年累计实际 -->
                  <td v-if="is_extendfield">{{ row.ayearSrooms }}</td>
                  <td v-if="is_extendfield">{{ row.ayearCrooms }}</td>
                  <td>{{ row.ayearRentRate }}</td>
                  <td>{{ row.ayearPrice }}</td>
                  <td v-if="is_extendfield">{{ row.ayearPerRevenue }}</td>
                  <td v-if="is_extendfield">{{ row.ayearRoomRevenue }}</td>
                  <td v-if="is_extendfield">{{ row.ayearFbRevenue }}</td>
                  <td v-if="is_extendfield">{{ row.ayearBhRevenue }}</td>
                  <td v-if="is_extendfield">{{ row.ayearOtherRevenue }}</td>
                  <td>{{ row.ayearRevenue }}</td>
                  <!-- 全年预算 -->
                  <td v-if="is_extendfield">{{ row.yearSroomsBudget }}</td>
                  <td v-if="is_extendfield">{{ row.yearCroomsBudget }}</td>
                  <td>{{ row.yearRentRate }}</td>
                  <td>{{ row.yearPrice }}</td>
                  <td v-if="is_extendfield">{{ row.yearPerRevenue }}</td>
                  <td v-if="is_extendfield">{{ row.yearRoomRevenue }}</td>
                  <td v-if="is_extendfield">{{ row.yearFbRevenue }}</td>
                  <td v-if="is_extendfield">{{ row.yearBhRevenue }}</td>
                  <td v-if="is_extendfield">{{ row.yearOtherRevenue }}</td>
                  <td>{{ row.yearBudget }}</td>
                  <!-- 年累计完成率 -->
                  <td>{{ row.yearCompleteRate }}</td>
                </tr>
              </tbody>

            </table>
          </div>
        </div>
      </a-card>
    </div>
    <SearchFilterModal v-if="showFilter" v-model:visible="showFilter" :fields="searchFormOptions" :visible="showFilter" @save="handleSaveFilter" />
  </div>
</template>

<script>
  import dayjs from 'dayjs';
  import * as MathUtil from '/@/utils/MathUtil';
  import * as DateUtil from '/@/utils/dateUtil';
  import TableCard from '/@/views/applications/ui/TableCard.vue';
  import { DatePicker, Switch, Button } from 'ant-design-vue';
  import { defHttp } from '/@/utils/http/axios';
  import { CalendarOutlined, DownloadOutlined } from '@ant-design/icons-vue';
  import SearchFilterModal from '/@/views/applications/ui/SearchFilterModal.vue';
  import { onMounted, nextTick } from 'vue';
  import monthSvg from '/@/assets/svg/month-svg.svg';
  import yearSvg from '/@/assets/svg/year-svg.svg';
  import daySvg from '/@/assets/svg/day-svg.svg';
  import * as XLSX from 'xlsx-js-style';
  
  const SUMMARY_FIELDS = [
    // 按你的缩略表头顺序
    // 月累计实际
    'actualSrooms', 'actualCrooms', 'revenue',
    // 全月预算
    'monthSroomsBudget', 'monthCroomsBudget', 'monthBudget',
    // 年累计实际
    'ayearSrooms', 'ayearCrooms', 'ayearRevenue',
    // 全年预算
    'yearSroomsBudget', 'yearCroomsBudget', 'yearBudget',
  ];

  const DETAIL_COLS = [
    'actualSrooms',
    'actualCrooms',
    'actualPerRevenue',
    'roomRevenue',
    'fbRevenue',
    'bhRevenue',
    'otherRevenue',
    'monthSroomsBudget',
    'monthCroomsBudget',
    'monthPerRevenueBudget',
    'monthRoomRevenueBudget',
    'monthFbRevenueBudget',
    'monthBhRevenueBudget',
    'monthOtherRevenueBudget',
    'ayearSrooms',
    'ayearCrooms',
    'ayearPerRevenue',
    'ayearRoomRevenue',
    'ayearFbRevenue',
    'ayearBhRevenue',
    'ayearOtherRevenue',
    'yearSroomsBudget',
    'yearCroomsBudget',
    'yearPerRevenueBudget',
    'yearRoomRevenueBudget',
    'yearFbRevenueBudget',
    'yearBhRevenueBudget',
    'yearOtherRevenueBudget',
  ];

  export default {
    name: 'HotelMonthAcc',

    components: {
      TableCard,
      ADatePicker: DatePicker,
      ASwitch: Switch,
      AButton: Button,
      CalendarOutlined,
      SearchFilterModal,
      DownloadOutlined,
    },

    data() {
      return {
        showFilter: false,
        searchFormOptions: [
          {
            value: 'date',
            label: '时段',
            selected: true,
            showDetails: true,
          },
          {
            value: 'detail',
            label: '展示详细列',
            selected: true,
            showDetails: true,
          },
        ],
        
        selectedFields: [],
        loading: false,
        tableHigh: { x: '100%', y: 'calc(60vh)' },
        is_extendfield: false, // 表示显示全部列
        currentDate: dayjs().subtract(1, 'days'),
        caliberList: [],
        currentCaliber: {},
        subjectList: {},
        caliberSel: {},
        dataList: [],
        dataColumns: [
          {
            title: '项目名称',
            dataIndex: 'hotelName',
            key: 'hotelName',
            width: 220,
            align: 'left',
            ellipsis: true,
            fixed: 'left',
            scopedSlots: {
              customRender: 'hotelName',
            },
          },
          {
            dataIndex: 'actualSrooms',
            width: 120,
            align: 'right',
            children: [
              {
                title: '已售房间夜',
                dataIndex: 'actualSrooms',
                key: 'actualSrooms',
                width: 120,
                align: 'right',
                customRender: ({ text }) => this.dot2Formatter(text, 0),
              },
            ],
          },
          {
            dataIndex: 'actualCrooms',
            width: 120,
            align: 'right',
            children: [
              {
                title: '可售房间夜',
                dataIndex: 'actualCrooms',
                key: 'actualCrooms',
                width: 120,
                align: 'right',
                customRender: ({ text }) => this.dot2Formatter(text, 0),
              },
            ],
          },
          {
            dataIndex: 'actualRentRate',
            width: 110,
            align: 'right',
            children: [
              {
                title: '出租率',
                dataIndex: 'actualRentRate',
                key: 'actualRentRate',
                width: 110,
                align: 'right',
                customRender: ({ text }) => this.percent2DFormatter(text, 0),
              },
            ],
          },
          {
            title: '月累计实际',
            dataIndex: 'actualPrice',
            width: 120,
            align: 'right',
            children: [
              {
                title: '平均房价',
                dataIndex: 'actualPrice',
                key: 'actualPrice',
                width: 120,
                align: 'right',
                customRender: ({ text }) => this.dot2Formatter(text, 0),
              },
            ],
          },
          {
            dataIndex: 'actualPerRevenue',
            width: 110,
            align: 'right',
            children: [
              {
                title: '每房收益',
                dataIndex: 'actualPerRevenue',
                key: 'actualPerRevenue',
                width: 110,
                align: 'right',
                customRender: ({ text }) => this.dot2Formatter(text, 0),
              },
            ],
          },
          {
            dataIndex: 'roomRevenue',
            width: 110,
            align: 'right',
            children: [
              {
                title: '客房收入',
                dataIndex: 'roomRevenue',
                key: 'roomRevenue',
                width: 110,
                align: 'right',
                customRender: ({ text }) => this.dot2Formatter(text, 0),
              },
            ],
          },
          {
            dataIndex: 'fbRevenue',
            width: 110,
            align: 'right',
            children: [
              {
                title: '餐厅收入',
                dataIndex: 'fbRevenue',
                key: 'fbRevenue',
                width: 110,
                align: 'right',
                customRender: ({ text }) => this.dot2Formatter(text, 0),
              },
            ],
          },
          {
            dataIndex: 'bhRevenue',
            width: 110,
            align: 'right',
            children: [
              {
                title: '宴会收入',
                dataIndex: 'bhRevenue',
                key: 'bhRevenue',
                width: 110,
                align: 'right',
                customRender: ({ text }) => this.dot2Formatter(text, 0),
              },
            ],
          },
          {
            dataIndex: 'otherRevenue',
            width: 110,
            align: 'right',
            children: [
              {
                title: '其他收入',
                dataIndex: 'otherRevenue',
                key: 'otherRevenue',
                width: 110,
                align: 'right',
                customRender: ({ text }) => this.dot2Formatter(text, 0),
              },
            ],
          },
          {
            dataIndex: 'revenue',
            width: 120,
            align: 'right',
            children: [
              {
                title: '总收入',
                dataIndex: 'revenue',
                key: 'revenue',
                width: 120,
                align: 'right',
                customRender: ({ text }) => this.currencyWNFormatter(text, 0),
              },
            ],
          },
          {
            dataIndex: 'monthSroomsBudget',
            width: 120,
            align: 'right',
            className: 'table-header-color',
            children: [
              {
                title: '已售房间夜',
                dataIndex: 'monthSroomsBudget',
                key: 'monthSroomsBudget',
                width: 120,
                align: 'right',
                className: 'table-header-color',
                customRender: ({ text }) => this.dot2Formatter(text, 0),
              },
            ],
          },
          {
            dataIndex: 'monthCroomsBudget',
            width: 120,
            align: 'right',
            className: 'table-header-color',
            children: [
              {
                title: '可售房间夜',
                dataIndex: 'monthCroomsBudget',
                key: 'monthCroomsBudget',
                width: 120,
                align: 'right',
                className: 'table-header-color',
                customRender: ({ text }) => this.dot2Formatter(text, 0),
              },
            ],
          },
          {
            dataIndex: 'monthRentRateBudget',
            width: 110,
            align: 'right',
            className: 'table-header-color',
            children: [
              {
                title: '出租率',
                dataIndex: 'monthRentRateBudget',
                key: 'monthRentRateBudget',
                width: 110,
                align: 'right',
                className: 'table-header-color',
                customRender: ({ text }) => this.percent2DFormatter(text, 0),
              },
            ],
          },
          {
            title: '全月预算',
            dataIndex: 'monthPriceBudget',
            width: 110,
            align: 'right',
            className: 'table-header-color',
            children: [
              {
                title: '平均房价',
                dataIndex: 'monthPriceBudget',
                key: 'monthPriceBudget',
                width: 110,
                align: 'right',
                className: 'table-header-color',
                customRender: ({ text }) => this.dot2Formatter(text, 0),
              },
            ],
          },
          {
            dataIndex: 'monthPerRevenueBudget',
            width: 110,
            align: 'right',
            className: 'table-header-color',
            children: [
              {
                title: '每房收益',
                dataIndex: 'monthPerRevenueBudget',
                key: 'monthPerRevenueBudget',
                width: 110,
                align: 'right',
                className: 'table-header-color',
                customRender: ({ text }) => this.dot2Formatter(text, 0),
              },
            ],
          },
          {
            dataIndex: 'monthRoomRevenueBudget',
            width: 110,
            align: 'right',
            className: 'table-header-color',
            children: [
              {
                title: '客房收入',
                dataIndex: 'monthRoomRevenueBudget',
                key: 'monthRoomRevenueBudget',
                width: 110,
                align: 'right',
                className: 'table-header-color',
                customRender: ({ text }) => this.dot2Formatter(text, 0),
              },
            ],
          },
          {
            dataIndex: 'monthFbRevenueBudget',
            width: 110,
            align: 'right',
            className: 'table-header-color',
            children: [
              {
                title: '餐厅收入',
                dataIndex: 'monthFbRevenueBudget',
                key: 'monthFbRevenueBudget',
                width: 110,
                align: 'right',
                className: 'table-header-color',
                customRender: ({ text }) => this.dot2Formatter(text, 0),
              },
            ],
          },
          {
            dataIndex: 'monthBhRevenueBudget',
            width: 110,
            align: 'right',
            className: 'table-header-color',
            children: [
              {
                title: '宴会收入',
                dataIndex: 'monthBhRevenueBudget',
                key: 'monthBhRevenueBudget',
                width: 110,
                align: 'right',
                className: 'table-header-color',
                customRender: ({ text }) => this.dot2Formatter(text, 0),
              },
            ],
          },
          {
            dataIndex: 'monthOtherRevenueBudget',
            width: 110,
            align: 'right',
            className: 'table-header-color',
            children: [
              {
                title: '其他收入',
                dataIndex: 'monthOtherRevenueBudget',
                key: 'monthOtherRevenueBudget',
                width: 110,
                align: 'right',
                className: 'table-header-color',
                customRender: ({ text }) => this.dot2Formatter(text, 0),
              },
            ],
          },
          {
            dataIndex: 'monthBudget',
            width: 120,
            align: 'right',
            className: 'table-header-color',
            children: [
              {
                title: '总收入',
                dataIndex: 'monthBudget',
                key: 'monthBudget',
                width: 120,
                align: 'right',
                className: 'table-header-color',
                customRender: ({ text }) => this.currencyWNFormatter(text, 0),
              },
            ],
          },
          {
            dataIndex: 'monthComRate',
            width: 120,
            align: 'right',
            className: 'table-header-color',
            children: [
              {
                dataIndex: 'monthComRate',
                key: 'monthComRate',
                width: 120,
                align: 'right',
                className: 'table-header-color',
                title: '月累计完成率',
                customRender: ({ text }) => this.percent2DFormatter(text, 0),
              },
            ],
          },
          {
            dataIndex: 'ayearSrooms',
            width: 120,
            align: 'right',
            children: [
              {
                title: '已售房间夜',
                dataIndex: 'ayearSrooms',
                key: 'ayearSrooms',
                width: 120,
                align: 'right',
                customRender: ({ text }) => this.dot2Formatter(text, 0),
              },
            ],
          },
          {
            dataIndex: 'ayearCrooms',
            width: 120,
            align: 'right',
            children: [
              {
                title: '可售房间夜',
                dataIndex: 'ayearCrooms',
                key: 'ayearCrooms',
                width: 120,
                align: 'right',
                customRender: ({ text }) => this.dot2Formatter(text, 0),
              },
            ],
          },
          {
            dataIndex: 'ayearRentRate',
            width: 110,
            align: 'right',
            children: [
              {
                title: '出租率',
                dataIndex: 'ayearRentRate',
                key: 'ayearRentRate',
                width: 110,
                align: 'right',
                customRender: ({ text }) => this.percent2DFormatter(text, 0),
              },
            ],
          },
          {
            title: '年累计实际',
            dataIndex: 'ayearPrice',
            width: 110,
            align: 'right',
            children: [
              {
                title: '平均房价',
                dataIndex: 'ayearPrice',
                key: 'ayearPrice',
                width: 110,
                align: 'right',
                customRender: ({ text }) => this.dot2Formatter(text, 0),
              },
            ],
          },
          {
            dataIndex: 'ayearPerRevenue',
            width: 110,
            align: 'right',
            children: [
              {
                title: '每房收益',
                dataIndex: 'ayearPerRevenue',
                key: 'ayearPerRevenue',
                width: 110,
                align: 'right',
                customRender: ({ text }) => this.dot2Formatter(text, 0),
              },
            ],
          },
          {
            dataIndex: 'ayearRoomRevenue',
            width: 130,
            align: 'right',
            children: [
              {
                title: '客房收入',
                dataIndex: 'ayearRoomRevenue',
                key: 'ayearRoomRevenue',
                width: 130,
                align: 'right',
                customRender: ({ text }) => this.dot2Formatter(text, 0),
              },
            ],
          },
          {
            dataIndex: 'ayearFbRevenue',
            width: 130,
            align: 'right',
            children: [
              {
                title: '餐厅收入',
                dataIndex: 'ayearFbRevenue',
                key: 'ayearFbRevenue',
                width: 130,
                align: 'right',
                customRender: ({ text }) => this.dot2Formatter(text, 0),
              },
            ],
          },
          {
            dataIndex: 'ayearBhRevenue',
            width: 130,
            align: 'right',
            children: [
              {
                title: '宴会收入',
                dataIndex: 'ayearBhRevenue',
                key: 'ayearBhRevenue',
                width: 130,
                align: 'right',
                customRender: ({ text }) => this.dot2Formatter(text, 0),
              },
            ],
          },
          {
            dataIndex: 'ayearOtherRevenue',
            width: 110,
            align: 'right',
            children: [
              {
                title: '其他收入',
                dataIndex: 'ayearOtherRevenue',
                key: 'ayearOtherRevenue',
                width: 110,
                align: 'right',
                customRender: ({ text }) => this.dot2Formatter(text, 0),
              },
            ],
          },
          {
            dataIndex: 'ayearRevenue',
            width: 130,
            align: 'right',
            children: [
              {
                title: '总收入',
                dataIndex: 'ayearRevenue',
                key: 'ayearRevenue',
                width: 130,
                align: 'right',
                customRender: ({ text }) => this.currencyWNFormatter(text, 0),
              },
            ],
          },
          {
            dataIndex: 'yearSroomsBudget',
            width: 120,
            align: 'right',
            className: 'table-header-color',
            children: [
              {
                title: '已售房间夜',
                dataIndex: 'yearSroomsBudget',
                key: 'yearSroomsBudget',
                width: 120,
                align: 'right',
                className: 'table-header-color',
                customRender: ({ text }) => this.dot2Formatter(text, 0),
              },
            ],
          },
          {
            dataIndex: 'yearCroomsBudget',
            width: 120,
            align: 'right',
            className: 'table-header-color',
            children: [
              {
                title: '可售房间夜',
                dataIndex: 'yearCroomsBudget',
                key: 'yearCroomsBudget',
                width: 120,
                align: 'right',
                className: 'table-header-color',
                customRender: ({ text }) => this.dot2Formatter(text, 0),
              },
            ],
          },
          {
            dataIndex: 'yearRentRateBudget',
            width: 110,
            align: 'right',
            className: 'table-header-color',
            children: [
              {
                title: '出租率',
                dataIndex: 'yearRentRateBudget',
                key: 'yearRentRateBudget',
                width: 110,
                align: 'right',
                className: 'table-header-color',
                customRender: ({ text }) => this.percent2DFormatter(text, 0),
              },
            ],
          },
          {
            title: '全年预算',
            dataIndex: 'yearPriceBudget',
            width: 110,
            align: 'right',
            className: 'table-header-color',
            children: [
              {
                title: '平均房价',
                dataIndex: 'yearPriceBudget',
                key: 'yearPriceBudget',
                width: 110,
                align: 'right',
                className: 'table-header-color',
                customRender: ({ text }) => this.dot2Formatter(text, 0),
              },
            ],
          },
          {
            dataIndex: 'yearPerRevenueBudget',
            width: 110,
            align: 'right',
            className: 'table-header-color',
            children: [
              {
                title: '每房收益',
                dataIndex: 'yearPerRevenueBudget',
                key: 'yearPerRevenueBudget',
                width: 110,
                align: 'right',
                className: 'table-header-color',
                customRender: ({ text }) => this.dot2Formatter(text, 0),
              },
            ],
          },
          {
            dataIndex: 'yearRoomRevenueBudget',
            width: 130,
            align: 'right',
            className: 'table-header-color',
            children: [
              {
                title: '客房收入',
                dataIndex: 'yearRoomRevenueBudget',
                key: 'yearRoomRevenueBudget',
                width: 130,
                align: 'right',
                className: 'table-header-color',
                customRender: ({ text }) => this.dot2Formatter(text, 0),
              },
            ],
          },
          {
            dataIndex: 'yearFbRevenueBudget',
            width: 130,
            align: 'right',
            className: 'table-header-color',
            children: [
              {
                title: '餐厅收入',
                dataIndex: 'yearFbRevenueBudget',
                key: 'yearFbRevenueBudget',
                width: 130,
                align: 'right',
                className: 'table-header-color',
                customRender: ({ text }) => this.dot2Formatter(text, 0),
              },
            ],
          },
          {
            dataIndex: 'yearBhRevenueBudget',
            width: 130,
            align: 'right',
            className: 'table-header-color',
            children: [
              {
                title: '宴会收入',
                dataIndex: 'yearBhRevenueBudget',
                key: 'yearBhRevenueBudget',
                width: 130,
                align: 'right',
                className: 'table-header-color',
                customRender: ({ text }) => this.dot2Formatter(text, 0),
              },
            ],
          },
          {
            dataIndex: 'yearOtherRevenueBudget',
            width: 110,
            align: 'right',
            className: 'table-header-color',
            children: [
              {
                title: '其他收入',
                dataIndex: 'yearOtherRevenueBudget',
                key: 'yearOtherRevenueBudget',
                width: 110,
                align: 'right',
                className: 'table-header-color',
                customRender: ({ text }) => this.dot2Formatter(text, 0),
              },
            ],
          },
          {
            dataIndex: 'yearBudget',
            width: 130,
            align: 'right',
            className: 'table-header-color',
            children: [
              {
                title: '总收入',
                dataIndex: 'yearBudget',
                key: 'yearBudget',
                width: 130,
                align: 'right',
                className: 'table-header-color',
                customRender: ({ text }) => this.currencyWNFormatter(text, 0),
              },
            ],
          },
          {
            dataIndex: 'yearComRate',
            width: 120,
            align: 'right',
            className: 'table-header-color',
            children: [
              {
                dataIndex: 'yearComRate',
                key: 'yearComRate',
                width: 120,
                align: 'right',
                className: 'table-header-color',
                title: '年累计完成率',
                customRender: ({ text }) => this.percent2DFormatter(text, 0),
              },
            ],
          },
        ],
        exportHeader: [
          [
            '项目名称',
            '月累计实际',
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            '全月预算',
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            '月累计完成率',
            '年累计实际',
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            '全年预算',
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            '年累计完成率',
          ],
          [
            null,
            '已售房间夜',
            '可售房间夜',
            '出租率',
            '平均房价',
            '每房收益',
            '客房收入',
            '餐厅收入',
            '宴会收入',
            '其他收入',
            '总收入',
            '已售房间夜',
            '可售房间夜',
            '出租率',
            '平均房价',
            '每房收益',
            '客房收入',
            '餐厅收入',
            '宴会收入',
            '其他收入',
            '总收入',
            null,
            '已售房间夜',
            '可售房间夜',
            '出租率',
            '平均房价',
            '每房收益',
            '客房收入',
            '餐厅收入',
            '宴会收入',
            '其他收入',
            '总收入',
            '已售房间夜',
            '可售房间夜',
            '出租率',
            '平均房价',
            '每房收益',
            '客房收入',
            '餐厅收入',
            '宴会收入',
            '其他收入',
            '总收入',
            null,
          ],
        ],
        exprotMerges: [
          { s: { r: 0, c: 0 }, e: { r: 1, c: 0 } },
          { s: { r: 0, c: 1 }, e: { r: 0, c: 10 } },
          { s: { r: 0, c: 11 }, e: { r: 0, c: 20 } },
          { s: { r: 0, c: 21 }, e: { r: 1, c: 21 } },
          { s: { r: 0, c: 22 }, e: { r: 0, c: 31 } },
          { s: { r: 0, c: 32 }, e: { r: 0, c: 41 } },
          { s: { r: 0, c: 42 }, e: { r: 1, c: 42 } },
        ],
        pageHeader: {
          collapsed: true,
          title: '酒店月累计经营数据',
          formProrps: {
            layout: 'horizontal',
          },
          formOptions: [
            {
              label: '时段',
              slotName: 'dateslot',
            },
            {
              label: '展示详细列',
              slotName: 'detailslot',
            },
          ],
        },
        currentAcc: 'year',
        currentRange: [dayjs().startOf('month'), dayjs().endOf('month')],
        rangePickerOpen: false,
        monthSvg,
        yearSvg,
        daySvg,
        tableFields: [], // 存储所有 data-field 字段名
        tableData: [],    // 你的接口数据
         
      };
    },

    created() {
      defHttp.get({ url: '/data/hotel/list' }, { isTransformResponse: false }).then((res) => {
        if (res.code === 200 && res.result.length > 0) {
          this.currentHotel = { code: res.result.map((d) => d.code).join(',') };
          this.hotelList = res.result;
          this.fetchBaseInfo();
        }
      });
    },

    mounted() {
      // 获取所有有 data-field 的 th 的字段名（顺序很重要）
      this.$nextTick(() => {
        this.tableFields = Array.from(this.$el.querySelectorAll('th[data-field]')).map(th => th.getAttribute('data-field'));

        console.log("🚀 ~ mounted ~ this.tableFields:", this.tableFields)

      });
    
      // 这里可以请求接口数据并赋值给 tableData
      // this.tableData = ...
    },

    methods: {
      handleShowFilter() {
        this.showFilter = true;
      },

      handleSaveFilter(updatedFields) {
        this.selectedFields = updatedFields;
        this.searchFormOptions = updatedFields;
        // 更新表单显示
        const dateField = updatedFields.find((f) => f.value === 'date');
        const detailField = updatedFields.find((f) => f.value === 'detail');

        // 根据选择的字段更新表单显示
        this.$nextTick(() => {
          const formWrapper = document.querySelector('.form-wrapper');
          if (formWrapper) {
            const dateItem = formWrapper.querySelector('.form-item:nth-child(1)');
            const detailItem = formWrapper.querySelector('.form-item:nth-child(2)');

            if (dateItem) {
              dateItem.style.display = dateField?.selected ? 'flex' : 'none';
            }
            if (detailItem) {
              detailItem.style.display = detailField?.selected ? 'flex' : 'none';
            }
          }
        });

        // 重新查询数据
        this.fetchBaseInfo();
      },

      fetchBaseInfo() {
        this.loading = true;
        defHttp
          .post({
            url: '/data/query',
            data: {
              labelCode: 'getHotelDailySummary',
              params: [],
              sqlParams: [
                {
                  key: 'code',
                  value: this.currentHotel.code,
                },
                {
                  key: 'beginDate',
                  value: this.currentDate.clone().startOf('month').format('YYYY-MM-DD'),
                },
                {
                  key: 'endDate',
                  value: this.currentDate.format('YYYY-MM-DD'),
                },
                {
                  key: 'beginContrastDate',
                  value: 'x',
                },
                {
                  key: 'endContrastDate',
                  value: 'x',
                },
              ],
              pageIndex: 1,
              pageSize: 100,
            },
          })
          .then((res) => {
            if ( res.datas.totalCount > 0) {
              const dataArray = res.datas.data;
              const hotelMap = this.hotelList.reduce((acc, hotel) => {
                if (dataArray.filter((d) => d.hotelCode === hotel.code).length > 0) {
                  const key = hotel.hpositionName;
                  if (!acc[key]) {
                    acc[key] = [];
                  }
                  acc[key] = acc[key].concat(dataArray.filter((d) => d.hotelCode === hotel.code));
                }
                return acc;
              }, {});
              let dataList = [];
              Object.keys(hotelMap).forEach((key) => {
                const pDataList = hotelMap[key].map((h) => {
                  return this.wrapData(h);
                });
                dataList = dataList.concat(pDataList);
                // 动态生成初始值对象
                const initialTotals = SUMMARY_FIELDS.reduce(
                  (acc, field) => {
                    acc[field] = 0;
                    return acc;
                  },
                  { hotelName: `${key}酒店小计` }
                );

                const subSum = pDataList.reduce((acc, hotel) => {
                  SUMMARY_FIELDS.forEach((field) => {
                    acc[field] += Number(hotel[field]);
                  });
                  return acc;
                }, initialTotals);

                dataList.push(this.wrapData(subSum));
              });
              this.dataList = dataList;
            } else {
              this.dataList = [];
            }
            this.tableData = this.dataList;
            this.summaryData();
            this.loading = false;
          })
          .catch((error) => {
            console.error('获取数据失败：', error);
            this.loading = false;
            this.dataList = [];
          });
      },

      summaryData() {
        let record = {};
        this.dataColumns.forEach((c, index) => {
          const colKey = c.dataIndex;
          if (index === 0) {
            record[colKey] = '合计';
          } else if (SUMMARY_FIELDS.includes(colKey)) {
            record[colKey] = this.dataList.filter((d) => d.hotelName.includes('小计')).reduce((sum, item) => (sum += Number(item[colKey])), 0);
          }
        });
        record = this.wrapData(record);
        this.customRenderData(record, this.dataColumns);
        return [record];
      },

      customRenderData(data, columns) {
        columns.forEach((c) => {
          if (c.customRender) {
            const value = { text: data[c.dataIndex] };
            data[c.dataIndex] = c.customRender(value);
          }
          if (c.children) {
            this.customRenderData(data, c.children);
          }
        });
      },

      wrapData(data) {
        const {
          hotelName,
          actualCrooms,
          actualSrooms,
          revenue,
          roomRevenue,
          fbRevenue,
          bhRevenue,
          otherRevenue,
          yearBudget,
          yearCroomsBudget,
          yearSroomsBudget,
          yearRoomRevenueBudget,
          yearFbRevenueBudget,
          yearBhRevenueBudget,
          yearOtherRevenueBudget,
          monthBudget,
          monthCroomsBudget,
          monthSroomsBudget,
          monthRoomRevenueBudget,
          monthFbRevenueBudget,
          monthBhRevenueBudget,
          monthOtherRevenueBudget,
          ayearCrooms,
          ayearSrooms,
          ayearRevenue,
          ayearRoomRevenue,
          ayearFbRevenue,
          ayearBhRevenue,
          ayearOtherRevenue,
        } = data;
        const actualPrice = this.safeDivide(roomRevenue, actualSrooms);
        const monthPriceBudget = this.safeDivide(monthRoomRevenueBudget, monthSroomsBudget);
        const ayearPrice = this.safeDivide(ayearRoomRevenue, ayearSrooms);
        const yearPriceBudget = this.safeDivide(yearRoomRevenueBudget, yearSroomsBudget);

        const actualRentRate = this.safeDivide(actualSrooms, actualCrooms);
        const monthRentRateBudget = this.safeDivide(monthSroomsBudget, monthCroomsBudget);
        const ayearRentRate = this.safeDivide(ayearSrooms, ayearCrooms);
        const yearRentRateBudget = this.safeDivide(yearSroomsBudget, yearCroomsBudget);

        const actualPerRevenue = actualPrice * actualRentRate;
        const monthPerRevenueBudget = monthPriceBudget * monthRentRateBudget;
        const ayearPerRevenue = ayearPrice * ayearRentRate;
        const yearPerRevenueBudget = yearPriceBudget * yearRentRateBudget;

        const monthComRate = this.safeDivide(revenue, monthBudget);
        // console.log("🚀 ~ wrapData ~ monthComRate:", monthComRate,revenue,monthBudget)
        const yearComRate = this.safeDivide(ayearRevenue, yearBudget);

        data = {
          hotelName,
          actualSrooms,
          actualCrooms,
          actualRentRate,
          actualPrice,
          actualPerRevenue,
          roomRevenue,
          fbRevenue,
          bhRevenue,
          otherRevenue,
          revenue,
          monthSroomsBudget,
          monthCroomsBudget,
          monthRentRateBudget,
          monthPriceBudget,
          monthPerRevenueBudget,
          monthRoomRevenueBudget,
          monthFbRevenueBudget,
          monthBhRevenueBudget,
          monthOtherRevenueBudget,
          monthBudget,
          monthComRate,
          ayearSrooms,
          ayearCrooms,
          ayearRentRate,
          ayearPrice,
          ayearPerRevenue,
          ayearRoomRevenue,
          ayearFbRevenue,
          ayearBhRevenue,
          ayearOtherRevenue,
          ayearRevenue,
          yearSroomsBudget,
          yearCroomsBudget,
          yearRentRateBudget,
          yearPriceBudget,
          yearPerRevenueBudget,
          yearRoomRevenueBudget,
          yearFbRevenueBudget,
          yearBhRevenueBudget,
          yearOtherRevenueBudget,
          yearBudget,
          yearComRate,
        };
        return data;
      },

      handleSearch() {
        this.fetchBaseInfo();
      },

      handleReset() {
        this.currentDate = dayjs().subtract(1, 'days');
        this.is_extendfield = false;
        this.fetchBaseInfo();
      },

      onChange(date) {
        this.currentDate = date;
      },

      checkTag(key) {
        return key.includes('小计');
      },

      getDataColumns() {
        let columns = this.dataColumns;
        if (!this.is_extendfield) {
          columns = columns.filter((c) => !DETAIL_COLS.includes(c.dataIndex));
        }
        return columns;
      },

      getExportHeader() {
        let exportHeader = this.exportHeader;
        if (!this.is_extendfield) {
          exportHeader = exportHeader.map((row) =>
            row.filter(
              (_, index) => ![1, 2, 5, 6, 7, 8, 9, 11, 12, 15, 16, 17, 18, 19, 22, 23, 26, 27, 28, 29, 30, 32, 33, 36, 37, 38, 39, 40].includes(index)
            )
          );
          exportHeader[0][1] = '月累计实际';
          exportHeader[0][4] = '全月预算';
          exportHeader[0][8] = '年累计实际';
          exportHeader[0][11] = '全年预算';
        }
        return exportHeader;
      },

      getExprotMerges() {
        return [
          { s: { r: 0, c: 0 }, e: { r: 1, c: 0 } },
          { s: { r: 0, c: 1 }, e: { r: 0, c: this.is_extendfield ? 10 : 3 } },
          {
            s: { r: 0, c: this.is_extendfield ? 11 : 4 },
            e: { r: 0, c: this.is_extendfield ? 20 : 6 },
          },
          {
            s: { r: 0, c: this.is_extendfield ? 21 : 7 },
            e: { r: 1, c: this.is_extendfield ? 21 : 7 },
          },
          {
            s: { r: 0, c: this.is_extendfield ? 22 : 8 },
            e: { r: 0, c: this.is_extendfield ? 31 : 10 },
          },
          {
            s: { r: 0, c: this.is_extendfield ? 32 : 11 },
            e: { r: 0, c: this.is_extendfield ? 41 : 13 },
          },
          {
            s: { r: 0, c: this.is_extendfield ? 42 : 14 },
            e: { r: 1, c: this.is_extendfield ? 42 : 14 },
          },
        ];
      },

      percentFormatter(value) {
        return (value * 100).toFixed(0) + '%';
      },

      percentTipFormatter(params) {
        return (
          params[0].axisValue +
          '<br />' +
          params
            .map((p) => {
              return `${p.marker} ${p.seriesName}: ${(p.data * 100).toFixed(0)}%`;
            })
            .join('<br />')
        );
      },

      currencyWFormatter(value, dot = 2, unit = '万') {
        return MathUtil.currencyWFormatter(value, dot, unit);
      },

      currencyWNFormatter(value, dot = 0) {
        return MathUtil.currencyWNFormatter(value, dot);
      },

      percent2DFormatter(value, dot = 2) {
        return MathUtil.percent2DFormatter(value, dot);
      },

      diffPercent2Formatter(thisData, lastData, dot = 2) {
        return MathUtil.diffPercent2Formatter(thisData, lastData, dot);
      },

      dot2Formatter(value, dot = 2) {
        return MathUtil.dot2Formatter(value, dot);
      },

      dateRangeFormatter(dataRange) {
        return DateUtil.dateRangeFormatter(dataRange);
      },

      dateFormatter(data) {
        return DateUtil.dateFormatter(data);
      },

      monthFormatter(data) {
        return DateUtil.monthFormatter(data);
      },

      safeDivide(numerator, denominator) {
        return MathUtil.safeDivide(numerator, denominator);
      },

      lastThursday() {
        let currentDate = dayjs();
        return currentDate.day(currentDate.day() > 4 ? 4 : -3);
      },

      previousThursday() {
        return dayjs(this.lastThursday()).subtract(7, 'days');
      },

      handleAccChange(type) {
        this.currentAcc = type;
        let start, end;
        if (type === 'day') {
          start = end = dayjs();
        } else if (type === 'month') {
          start = dayjs().startOf('month');
          end = dayjs().endOf('month');
        } else if (type === 'year') {
          start = dayjs().startOf('year');
          end = dayjs().endOf('year');
        }
        this.currentRange = [start, end];
        this.fetchBaseInfo();
      },

      onRangeOpenChange(open) {
        this.rangePickerOpen = open;
      },

      onRangeOk() {
        this.rangePickerOpen = false;
        this.fetchBaseInfo();
      },

      handleExport() {
        // 1. 获取表头
        const header = this.getExportHeader(); // 二维数组
        // 2. 获取数据
        const data = this.dataList.map(item => {
          if (!this.is_extendfield) {
            // 缩略列
            return [
              item.hotelName,
              item.actualSrooms,
              item.actualCrooms,
              item.revenue,
              item.monthSroomsBudget,
              item.monthCroomsBudget,
              item.monthBudget,
              item.ayearSrooms,
              item.ayearCrooms,
              item.ayearRevenue,
              item.yearSroomsBudget,
              item.yearCroomsBudget,
              item.yearBudget,
            ];
          } else {
            // 全部列
            return [
              item.hotelName,
              item.actualSrooms,
              item.actualCrooms,
              item.actualRentRate,
              item.actualPrice,
              item.actualPerRevenue,
              item.roomRevenue,
              item.fbRevenue,
              item.bhRevenue,
              item.otherRevenue,
              item.revenue,
              item.monthSroomsBudget,
              item.monthCroomsBudget,
              item.monthRentRateBudget,
              item.monthPriceBudget,
              item.monthPerRevenueBudget,
              item.monthRoomRevenueBudget,
              item.monthFbRevenueBudget,
              item.monthBhRevenueBudget,
              item.monthOtherRevenueBudget,
              item.monthBudget,
              item.monthComRate,
              item.ayearSrooms,
              item.ayearCrooms,
              item.ayearRentRate,
              item.ayearPrice,
              item.ayearPerRevenue,
              item.ayearRoomRevenue,
              item.ayearFbRevenue,
              item.ayearBhRevenue,
              item.ayearOtherRevenue,
              item.ayearRevenue,
              item.yearSroomsBudget,
              item.yearCroomsBudget,
              item.yearRentRateBudget,
              item.yearPriceBudget,
              item.yearPerRevenueBudget,
              item.yearRoomRevenueBudget,
              item.yearFbRevenueBudget,
              item.yearBhRevenueBudget,
              item.yearOtherRevenueBudget,
              item.yearBudget,
              item.yearComRate,
            ];
          }
        });
        // 3. 合并表头和数据
        const aoa = [...header, ...data];
        // 4. 生成 worksheet
        const ws = XLSX.utils.aoa_to_sheet(aoa);
        // 5. 合并单元格
        ws['!merges'] = this.getExprotMerges();
        // 6. 可选：设置样式（如加粗表头）
        header.forEach((row, rowIdx) => {
          row.forEach((cell, colIdx) => {
            const cellRef = XLSX.utils.encode_cell({ r: rowIdx, c: colIdx });
            if (ws[cellRef]) {
              ws[cellRef].s = {
                font: { bold: true },
                alignment: { horizontal: 'center', vertical: 'center' },
              };
            }
          });
        });
        // 7. 导出
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, '月累计经营数据');
        XLSX.writeFile(wb, '酒店月累计经营数据.xlsx');
      },

      // 获取所有有 data-field 的 th 的字段名（顺序很重要）
      getTableFields() {
        debugger;
        return Array.from(document.querySelectorAll('th[data-field]')).map(th => th.getAttribute('data-field'));
      },
    },
  };
</script>

<style lang="less" scoped>
  @import "@/styles/fixtable.less";


  .hotel-month-acc {
    display: flex;
    flex-direction: column;
    background-color: #fff;

    .top-section {
      background: #fff;
      padding: 24px 24px 0;
    }

    .header-wrapper {
      margin-bottom: 24px;

      .title {
        font-size: 18px;
        font-weight: 600;
        color: #1a253b;
        margin: 0;
        padding: 0;
      }
    }

    .form-wrapper {
      margin-bottom: 24px;

      .form-content {
        display: flex;
        align-items: center;
      }

      .form-item {
        flex: 1;
        display: flex;
        align-items: center;
        padding: 0 16px;

        &:first-child {
          padding-left: 0;
          justify-content: flex-end;
        }

        &:last-child {
          padding-right: 0;
        }

        .label {
          margin-right: 12px;
          color: rgba(0, 0, 0, 0.85);
          font-size: 14px;
        }
      }
      .form-item-center {
        justify-content: center;
      }
      .filter-icon-container {
        display: inline-block;
        padding: 4px;
        border-radius: 4px;
        transition: all 0.3s ease;
        margin-left: 10px;
      }

      .icon-screen {
        width: 20px;
        height: 20px;
        cursor: pointer;
        transition: all 0.3s ease;
        object-fit: scale-down;
      }

      .filter-icon-container:hover {
        background-color: #e1ebf9;
      }

      .icon-screen:hover {
        transform: scale(1.1);
        opacity: 0.8;
      }
    }

    .main-content {
      flex: 1;
      background: @content-inside-bg;
      padding: 16px 0;
      overflow: hidden;

      .card-flex-all {
        height: 100%;
      }

      &-title-custom {
        color: #00b578;
        font-weight: 500;
      }

      .card-table-head {
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        text-align: center;
        font-weight: 500;
        font-size: 15px;
        padding: 8px 0 0 0;
        margin-bottom: 8px;
        background: #fafbfc;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        flex-direction: column;
        overflow: visible;
      }
      .card-table-head::after {
        content: '';
        display: block;
        width: 100%;
        height: 8px;
        background: linear-gradient(90deg, #eaeaf1 0%, #e9e7f2 100%);
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        margin-top: 8px;
      }
      .card-table-head-remark {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
      }
 
       
  
      .acc-selector .button-icon {
        width: 20px;
        height: 20px;
        cursor: pointer;
        transition: all 0.3s ease;
        object-fit: scale-down;
        &.active {
          transform: scale(1.1);
          opacity: 0.8;
        }
      }
      .acc-title-span {
        color: #bbb;
        font-weight: 550;
        transition: color 0.2s;
        &.active {
          color: #222;
        }
      }

      
      
    }

 
  }
</style>
